@keyframes slideInLeft {
    from {
      transform: translate3d(-100%, 0, 0);
      display: none;
    }

    to {
      transform: translate3d(0, 0, 0);
      display: block;
    }
  }

  @keyframes slideInRight {
    from {
      transform: translate3d(0, 0, 0);
      display: block;
    }

    to {
      transform: translate3d(100%, 0, 0);
      display: none;
    }
  }

  .bounce-enter-active {
    animation: slideInLeft 0.6s;
  }

  .bounce-leave-active {
    animation: slideInRight 0.6s;
  }

  @keyframes slideOutLeft {
    from {
      transform: translate3d(100%, 0, 0);
      display: none;
    }

    to {
      transform: translate3d(0, 0, 0);
      display: block;
    }
  }

  @keyframes slideOutRight {
    from {
      transform: translate3d(0, 0, 0);
      display: block;
    }

    to {
      transform: translate3d(-100%, 0, 0);
      display: none;
    }
  }

  .up-enter-active {
    animation: slideOutLeft 0.6s;
  }

  .up-leave-active {
    animation: slideOutRight 0.6s;
  }